<h1>统计</h1>
<div class="clr-row">
  <div class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-12	clr-col-xl-4">
    <h6>总计:</h6>
    <ul class="list">
      <!-- <li>
        Current experience:
        <span>{{ms.game.experience | format:true}}</span>
      </li> -->
      <li>
        经验获得总数:
        <span>{{ms.game.stats.totalExperience | format:true}}</span>
      </li>
      <li>
        累计获得的能力:
        <span>{{ms.game.allMateries.totalEarned}}</span>
      </li>
      <li>
        完成的世界:
        <span>{{ms.game.stats.completedWorld | format:true}}</span>
      </li>
      <li>
        最佳经验/秒:
        <span>{{ms.game.stats.bestExpS}}</span>
      </li>
      <li>
        游戏开始时间:
        <span>{{ms.game.stats.worldStartDate | date:'medium'}}</span>
      </li>
    </ul>

  </div>
  <div class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-12	clr-col-xl-8">
    <h6>最近10个世界:</h6>
    <clr-datagrid class="datagrid-compact">
      <clr-dg-column [clrDgField]="'startDate'">开始时间</clr-dg-column>
      <clr-dg-column [clrDgField]="'endDate'">结束时间</clr-dg-column>
      <clr-dg-column [clrDgField]="'worldName'">名称</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="runExpSorter">经验</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="runExpPerSecSorter">经验/秒</clr-dg-column>
      <clr-dg-column [clrDgField]="'completed'">已完成</clr-dg-column>

      <clr-dg-row *clrDgItems="let run of ms.game.stats.runs">
        <clr-dg-cell>{{run.startDate | date:'medium'}}</clr-dg-cell>
        <clr-dg-cell>{{run.endDate | date:'medium'}}</clr-dg-cell>
        <clr-dg-cell>{{run.worldName}}</clr-dg-cell>
        <clr-dg-cell>{{run.experience | format:true}}</clr-dg-cell>
        <clr-dg-cell>{{run.expPerSec | format}}</clr-dg-cell>
        <clr-dg-cell>{{run.completed}}</clr-dg-cell>
      </clr-dg-row>
    </clr-datagrid>
  </div>
  <div class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-12	clr-col-xl-12">
    <div style="width: 100%">
      <canvas #chart></canvas>
    </div>
  </div>
</div>
